<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局应用</title>
</head>
<style>
    /* 公共样式 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    ul {
        float: left;
        margin: 10px 0 0 10px;
        width: 80px;
        height: 100px;
        background-color: #ccc;
        border-radius:  5px;
    }

    li {
        list-style: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color:red;
    }

    .ul1 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .ul2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }

    .ul3 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .ul3 li:nth-child(2) {
        align-self: center;
    }

    .ul3 li:nth-child(3) {
        align-self: flex-end;
    }

    .ul4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    .ul4 li {
        margin:15px 10px;
    }

    .ul5 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    .ul5 li:nth-child(3) {
        margin: 0 30px;
    }

    .ul6{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    .ul6 li {
        margin: 0 10px;
    }

    .ul8 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }

    .ul8 li {
        margin: 0 10px;
    }

    .ul9 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        padding: 5px;
    }


    .box {
            float: left;
            margin: 10px 0 0 10px;
            width: 80px;
            height: 100px;
            background-color: #ccc;
            border-radius: 5px;
        }

        li {
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
        }

        .box ul {
            display: flex;
            justify-content: space-between;
            width: 80px;
            height: 50px;
            margin: 0;
            padding: 5px;
        }
        /* 第一给圆圈：自身默认靠左上伸缩，可以不写 */
        .top li:nth-child(1) {
            align-self: flex-start;
        }
        /* 第二个圆圈：自身居中伸缩 */
        .top li:nth-child(2) {
            align-self: center;
        }
        /* 第三个圆圈：自身靠右下伸缩 */
        .top li:nth-child(3) {
            align-self: flex-end;
        }
        /* 最后四个圆圈的 父元素 ul */
        .box .bottom {
            flex-wrap: wrap;
            padding: 0 12px;
        }
</style>
<body>
    <!-- 
        用flex布局实现麻将效果
     -->

     <!-- 1 -->
     <ul class="ul1">
         <li></li>
     </ul>

     <!-- 2 -->
     <ul class="ul2">
        <li></li>
        <li></li>
     </ul>

     <!-- 3 -->
     <ul class="ul3">
        <li></li>
        <li></li>
        <li></li>
     </ul>


     <!-- 4 -->
     <ul class="ul4">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>
    
      <!-- 5 -->
      <ul class="ul5">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>

     <!-- 6 -->
     <ul class="ul6">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>

     <!-- 7 -->
     <box class="box">
        <ul class="top">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="bottom">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </box>

     <!-- 8 -->
     <ul class="ul8">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>

     <!-- 9 -->
     <ul class="ul9">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
     </ul>
</body>
</html>